<template>
  <el-drawer v-model="visiable" title="更多条件" size="40%" class="drawer" :before-close="beforeClose">
    <article class="type-text">教师条件</article>
    <el-divider />
    <el-form :inline="true">
      <el-form-item label="教师姓名">
        <el-input v-model="pageQuery.otherParams.tchName" placeholder="输入教师姓名搜索" clearable />
      </el-form-item>
      <el-form-item label="教师工号">
        <el-input v-model="pageQuery.otherParams.workId" placeholder="输入教师姓名搜索" clearable />
      </el-form-item>
    </el-form>
    <article class="type-text">课程条件</article>
    <el-divider />
    <el-form :inline="true">
      <el-form-item label="课程代码">
        <el-input v-model="pageQuery.otherParams.courseCode" placeholder="输入课程代码搜索" clearable />
      </el-form-item>
      <el-form-item label="课程名称">
        <el-input v-model="pageQuery.otherParams.courseName" placeholder="输入教学班搜索" clearable />
      </el-form-item>
      <el-form-item label="课程学分">
        <el-input v-model="pageQuery.otherParams.credit" placeholder="输入学分搜索" clearable />
      </el-form-item>
      <el-form-item label="开课类型">
        <el-input v-model="pageQuery.otherParams.courseType" placeholder="输入开课类型搜索" clearable />
      </el-form-item>
      <el-form-item label="学时类型">
        <el-input v-model="pageQuery.otherParams.classHourType" placeholder="输入学时类型搜索" clearable />
      </el-form-item>
      <el-form-item label="开课学院">
        <el-input v-model="pageQuery.otherParams.openCollege" placeholder="输入开课学院搜索" clearable />
      </el-form-item>
      <el-form-item label="上课地点">
        <el-input v-model="pageQuery.otherParams.place" placeholder="输入上课地点搜索" clearable />
      </el-form-item>
      <el-form-item label="总课时">
        <el-input v-model="pageQuery.otherParams.totalHours" placeholder="输入总课时搜索" clearable />
      </el-form-item>
      <el-form-item label="课程学年">
        <el-input v-model="pageQuery.otherParams.schoolYear" placeholder="输入学年搜索" clearable />
      </el-form-item>
      <el-form-item label="面向年级">
        <el-input v-model="pageQuery.otherParams.schoolYear" placeholder="输入学年搜索" clearable />
      </el-form-item>
      <el-form-item label="教学班">
        <el-input v-model="pageQuery.otherParams.teachClass" placeholder="输入教学班搜索" clearable />
      </el-form-item>
      <el-form-item label="面向对象">
        <el-input v-model="pageQuery.otherParams.allowBand" placeholder="输入面向对象搜索" clearable />
      </el-form-item>
      <el-form-item label="课程学期">
        <el-select v-model="pageQuery.otherParams.stage" placeholder="选择学期搜索" clearable>
          <el-option label="第一学期" value="1" />
          <el-option label="第二学期" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="课程周数">
        <el-select v-model="week" clearable multiple collapse-tags placeholder="选择上课周数" @change="onSelectChange('week')">
          <el-option v-for="item in 16" :key="item" :label="'第'+ item + '周'" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="课程星期">
        <el-select v-model="weekDay" clearable multiple collapse-tags placeholder="选择星期"
          @change="onSelectChange('weekDay')">
          <el-option v-for="item in 7" :key="item" :label="chineseWeedDay(item)" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="课程序号">
        <el-select v-model="orderNum" clearable multiple collapse-tags placeholder="选择课程的序号"
          @change="onSelectChange('orderNum')">
          <el-option v-for="item in 12" :key="item" :label="chineseOrderNum(item)" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否删除">
            <el-select v-model="pageQuery.otherParams.courseIsDelete" placeholder="选择课程是否删除搜索" clearable>
              <el-option label="是" value="1" />
              <el-option label="否" value="0" />
            </el-select>
          </el-form-item>
    </el-form>
    <!-- 底部按钮 -->
    <template #footer>
      <div style="flex: auto">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm">搜索</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { APIData, ICoursePageParams } from '../../../../type';
import { useAPI } from '../../../../request/api';
import { ElMessage, ElMessageBox } from 'element-plus';

const api = useAPI();
const week = ref([] as any)
const weekDay = ref([] as any)
const orderNum = ref([] as any)
const visiable = ref(false);
const pageQuery = reactive<ICoursePageParams>({
  otherParams: {
    courseName: '',
    tchName: '',
    schoolYear: '',
    stage: '',
    grade: '',
    courseType: '',
    classHourType: '',
    courseIsDelete: '',
    
    //以下在更多弹窗里面
    courseCode: '',
    openCollege: '',
    place: '',
    credit: '',
    week: '',
    weekDay: '',
    orderNum: '',
    teachClass: '',
    totalHours: '',
    allowBand: '',
    workId: ''
    // studentId: '',
  },
  pageParams: {
    pageNum: 1,
    pageSize: 10,
    sortField: '',
    sortType: '',
  },
});

const open = () => {
  visiable.value = true;
}

const onCancel = () => {
  ElMessage.success('您取消了操作');
  visiable.value = false;
}

const reset = () => {
  visiable.value = false;
  pageQuery.otherParams = {
    courseName: '',
    tchName: '',
    schoolYear: '',
    stage: '',
    grade: '',
    courseType: '',
    classHourType: '',
    courseIsDelete: '',
    
    //以下在更多弹窗里面
    courseCode: '',
    openCollege: '',
    place: '',
    credit: '',
    week: '',
    weekDay: '',
    orderNum: '',
    teachClass: '',
    totalHours: '',
    allowBand: '',
    workId: ''
    // studentId: '',
  }
}

const beforeClose = () => {
  ElMessageBox.confirm('关闭会清空数据，确定继续吗').then(() => {
    reset();
  }).catch(() => {
    // catch error
  })
}

const emit = defineEmits(['reload'])
const onConfirm = async () => {
  const res: APIData = await api.course.findPage(pageQuery);
  if (res.code === 200) {
    emit('reload', res.data);
    reset();
  }
  else ElMessage.error(res.message);
}

// 当多选框条件改变时触发
const onSelectChange = (type: string) => {
  if (type == 'week') pageQuery.otherParams.week = week.value.join(',')
  if (type == 'weekDay') pageQuery.otherParams.weekDay = weekDay.value.join(',')
  if (type == 'orderNum') pageQuery.otherParams.orderNum = orderNum.value.join(',')
}

// 转中文星期  计算属性
const chineseWeedDay = computed(() => {
  return (weekDay: number) => {
    switch (weekDay) {
      case 1: return '星期一';
      case 2: return '星期二';
      case 3: return '星期三';
      case 4: return '星期四';
      case 5: return '星期五';
      case 6: return '星期六';
      case 7: return '星期天';
      
    }
  }
})

// 转中文课程序号  计算属性
const chineseOrderNum = computed(() => {
  return (orderNum: number) => {
    switch (orderNum) {
      case 1: return '第一节';
      case 2: return '第二节';
      case 3: return '第三节';
      case 4: return '第四节';
      case 5: return '第五节';
      case 6: return '第六节';
      case 7: return '第七节';
      case 8: return '第八节';
      case 9: return '第九节';
      case 10: return '第十节';
      case 11: return '第十一节';
      case 12: return '第十二节';
    }
  }
})

defineExpose({ open })
</script>

<style scoped lang="scss">
.el-divider {
  margin-top: 8px;
}

.el-form {
  margin-bottom: 16px;
}

.type-text {
  font-size: 16px;
  font-weight: bold;
  color: var(--font-color);
}

:deep(.el-input__wrapper) {
  width: 200px;
}
</style>